<nz-form-item
  [ngClass]="{
      disabled: props.disabled,
      error: showError,
      required: props.required,
      valid: field.formControl!.status === 'VALID' && field.formControl!.touched === true
      }">
  <ng-container *ngIf="props.label && props.hideLabel !== true">
    <nz-form-label
      [ngClass]="{ disabled: props.disabled, error: showError }"
      [nzRequired]="props.required"
      [nzFor]="id"
      [nzTooltipTitle]="props.tooltip"
      [nzNoColon]="true">
      <span
        class="label"
        nz-typography
        nzEllipsis
        [nzContent]="props.label"></span>
    </nz-form-label>
  </ng-container>
  <nz-form-control
    [nzExtra]="props.showExtra && !showError ? descriptionTpl : undefined"
    [nzValidateStatus]="errorState"
    [nzErrorTip]="errorTpl">
    <ng-container #fieldComponent></ng-container>
  </nz-form-control>
</nz-form-item>

<!-- SHARED COMPONENT TEMPLATES -->
<!-- displays the field value description -->
<ng-template #descriptionTpl>
  <div class="form-field-description">
    <ng-container [ngSwitch]="props.extraType">
      <span
        *ngSwitchCase="'prompt'"
        class="extra-prompt"
        [innerHTML]="props.description">
      </span>
      <span
        *ngSwitchCase="'description'"
        class="extra-description"
        [innerHTML]="props.description">
      </span>
      <span
        *ngSwitchDefault
        [innerHTML]="props.description"></span>
    </ng-container>
  </div>
</ng-template>

<!-- displays field errors-->
<ng-template
  #errorTpl
  let-control>
  <div class="cvc-form-field-validation">
    <formly-validation-message
      *ngIf="props.showErrorTip"
      [field]="field"></formly-validation-message>
  </div>
</ng-template>
